<template>
  <div>
    <van-nav-bar
      title="更多"
      right-text="按钮"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
  <div class="more">
    显示地图：
    <van-switch 
      v-model="checked"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { NavBar, Switch } from 'vant'
import { useStore } from 'vuex'

export default {
  components: {
    'van-nav-bar': NavBar,
    'van-switch': Switch
  },

  setup() {
    const store = useStore()
    const checked = ref(store.state.isShowMap)

    const handleChange = (value) => {
      store.dispatch('changeTabs', value)
    }

    return {
      checked,
      handleChange
    }
  }
}
</script>

<style lang='stylus' scoped>
.more
  display flex
  justify-content flex-start
  align-items center
  padding .2rem
</style>